<!-- 人员信息上报 -->

<template>
  <div class="box" >
      <div class="left">
          <div style="    display: flex;
              justify-content: space-between;
              padding: 10px 20px 0 20px;
              background: #f5f7fa;
              height: 40px;
              border: 1px solid #e1e4eb;
              border-top: none;">
              <el-form :inline="true" size="mini"  ref="searchForm" :model="searchForm" style="width:100%">
                  
                  <el-form-item label-width="65px">
                      <el-date-picker
                              v-model="searchForm.sldate"
                              type="date"
                              value-format="yyyy/MM/dd"
                              placeholder="选择日期">
                      </el-date-picker>
                  </el-form-item>
                  <el-form-item  label-width="65px">
                      <el-select size="mini" placeholder="选择部门" filterable v-model="searchForm.dept" clearable  disabled >
                          <el-option
                                  v-for="(item,index) in deptData"
                                  :key="index"
                                  :label="item.DEPT_NAME"
                                  :value="item.DEPT_CODE" />
                      </el-select>
                  </el-form-item>
                  <el-form-item  label-width="65px">
                      <el-select size="mini" placeholder="选择机械类型" filterable v-model="searchForm.company" clearable  >
                          <el-option
                                  v-for="(item,index) in companyData"
                                  :key="index"
                                  :label="item.DICT_LABEL"
                                  :value="item.DICT_VALUE" />
                      </el-select>
                  </el-form-item>
                  
                  <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="selectMec">查询</el-button>
                  </el-form-item>
                  <el-button-group style="float:right;margin-right: 20px;">
                      <el-button icon="iconfont icon-tijiao" size="mini" @click="crtemec" ></el-button>
                  </el-button-group>
              </el-form>
          </div>
          <keep-alive>
              <el-table
                      :data="tableData"
                      stripe
                      highlight-current-row
                      @row-click="clknow"
                      :max-height="curHeight"
                      style="width: 100%">
                  <el-table-column prop="deptName" label="使用部门" width></el-table-column>
                  <el-table-column prop="macTypeName" label="机械类型" width></el-table-column>
                  <el-table-column prop="dictLabel" label="机械种类" width></el-table-column>
                  <el-table-column prop="jixie" label="机械数量" width>
                      <template slot-scope="scope">
                          <el-input
                            v-model="scope.row.eqpNum"
                            controls-position="right"
                            style="width: 90%"
                            class="inputClass"
                            size="mini"
                            placeholder="请输入数量"
                          ></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column  prop="renyuan" label="人员数量" width>
                      <template slot-scope="scope">
                          <el-input
                            v-model="scope.row.userNum"
                            controls-position="right"
                            style="width: 90%"
                            class="inputClass"
                            size="mini"
                            placeholder="请输入数量"
                          ></el-input>
                      </template>
                  </el-table-column>
              </el-table>
          </keep-alive>
          <!-- 分页区域 -->
          <div class="page">
              <el-pagination
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="innerPage.totalNum"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :page-sizes="[10, 20, 30, 40]"
                  :current-page='innerPage.pageNum'
                  :page-size="innerPage.pageSize">
              </el-pagination>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "mecpersion",
  data() {
    return {
      activeTab: 'first',
      show:true,
      activeName: 'first',
      sat:true,
      senddate:[],
      withdrawdata:[],
      curHeight:'0',
      formone:{},
      insertdata:{},
      innerPage:{
        totalNum:0,
        pageNum:1,
        pageSize:10,
      },
      showOrHidden:false,
        sor:false,
      searchForm:{
        dept:''
      },
      searchFormtwo:{},
      value: [],
      companyData: [],//机械列表
      deptData:'12312',
      deptData2:[],
      scheduleData:[],
      formLabelWidth:"150px",
       rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          neirong: [
            { required: true, message: '请输入维保内容', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          bianhao: [
            { required: true, message: '请输入机械编号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          bumen: [
            { required: true, message: '请选择部门', trigger: 'change' }
          ],
          leixing: [
            { required: true, message: '请选择机械类型', trigger: 'change' }
          ],
          weibao: [
            { required: true, message: '请选择维保类型', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
        },
      tableData: [],
      // 查询
      queryall: {
        startpage: 1,
        pagesize: 10
      },

      // 分页
      totalNum: 1,
      // 当前页码
      currentPage: 2,
      // 对话框隐藏
      // 通过flag控制进行添加操作还是修改操作,为true的时候进行的是添加操作
      flag: true,
      nowData: {},
      compData: [],
    };
  },

  beforeMount(){
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    this.curHeight = h - 230; 
  },

  created() {
        this.getMechanics();
        this.getListall();
        this.searchForm.dept = window.sessionStorage.getItem('deptName')
  },

  mounted() {

  },

  methods: {

      //查询按钮
      selectMec(){
        // console.log(this.searchForm.company)
        this.$http.get(`/${this.$ServiceName}/api/external/dreportmachineuser/${this.$version}/queryall`,{
          params:{
            "startpage":1,
            "pagesize":10,
            "workDate":this.searchForm.sldate,
            "eqpTypeCode":this.searchForm.company?this.searchForm.company:'',
          }
        }).then(res=>{
          if(res.data.code =="0000"){
            this.tableData = res.data.data.pages
            this.innerPage.totalNum = res.data.data.totalNum
            console.log(res)
          }else{
            this.$message.error('查询失败' + res.data.msg)
          }
        })
      },
      //当前行
      clknow(row,column,event){
        this.insertdata = row
      },

      // 上报按钮
      crtemec(){
      this.$http.post(`/${this.$ServiceName}/api/external/dreportmachineuser/${this.$version}/insert`,{
          "eqpClassCode": this.insertdata.eqpClassCode,
          "eqpClassType": this.insertdata.eqpClassType,
          "eqpNum": this.insertdata.eqpNum,
          "eqpTypeCode": this.insertdata.eqpTypeCode,
          "userNum": this.insertdata.userNum
          }).then(res=>{
            if(res.data.code == "0000"){
                this.$message.success('上报成功')
                this.insertdata = {}
                this.getListall();
            }else{
              this.$message.error(`上报失败` + res.data.msg)
            }
          })
      },
      handleCurrentChange(val){
        let linshi = this.searchForm.company
        this.$http.get(`/${this.$ServiceName}/api/external/dreportmachineuser/${this.$version}/queryall?startpage=${val}&pagesize=10${this.searchForm.company?'&eqpTypeCode='+ this.searchForm.company:'' }`)
        .then(res=>{
          this.tableData = res.data.data.pages;
          this.innerPage.totalNum = res.data.data.totalNum
        })
      },
    // 获取机械类型
    getMechanics(){
      this.$http.get(`/${this.$ServiceName}/api/external/dreportmachineuser/${this.$version}/listmactype`)
        .then(res=>{
          this.companyData = res.data.data
        })
    },
    //获取上报列表
    getListall(){
      this.$http.get(`/${this.$ServiceName}/api/external/dreportmachineuser/${this.$version}/queryall`,{
        params:this.queryall
      })
        .then(res=>{
          this.tableData = res.data.data.pages;
          this.innerPage.totalNum = res.data.data.totalNum
        })
    },
    //获取上报列表

    withdraw(){
      
    },
    select(){
         
    },
    handleClick(tab, event) {
        console.log(tab, event);
      },
    showOther(){
      },
      showMore(){
          this.sor = !this.sor;
      },
      cancelFormone(){

      },
      submitForm(){

      },
      selectNotReporte(){
         
      },
      increase(){

      },

      getDeptByCompanytwo(){

      },
    // 每页显示的条数
    handleSizeChange(val) {
      this.queryall.pagesize = val;
      this.getListall();
    },

    }
  }
</script>

<style lang="less" scoped>

/deep/ .el-tabs__header{
  margin:0;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
.pop /deep/ .el-form-item__content{
  margin-left: 20px!important;
}
/deep/.el-drawer__header{
  height: 41px;
  font-size: 16px;
  font-weight: 600;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}
.pop /deep/ .el-form-item__content{
  width: 100%;
}
.pop /deep/ .el-select{
  width: 72%;
}
.box /deep/ .el-form-item__content{
  width: 150px;
}
.box /deep/ .el-date-editor.el-input{
  width: 100%;
}
.box .top{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #F5F7FA;
  height: 80px;
  border: 1px solid #E1E4EB;
  border-top: none;
}

.box .top2{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #F5F7FA;
  height: 40px;
  border: 1px solid #E1E4EB;
  border-top: none;
}
.box /deep/ .el-form--inline .el-form-item{
  margin-right: 0;
}
.top /deep/ .el-select>.el-input{
  width:93%
}
.lanzhuang /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}

.tableX .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
   background-color: #ccc !important;
   border-radius: 30px !important;
}
.form-t {
  margin-bottom: 50px;
  padding: 0 1rem;
}
.form-t /deep/ .el-form-item__content {
  margin-left: 1rem !important;
  width: 60%;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
/deep/ .el-form-item {
  display: flex;
  // margin-bottom: 0!important;
}
.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  // line-height: 35px;
  padding-right: 1rem;
  height: 51px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box {
  border-bottom: 1px solid #e1e4eb;
  border-top: none !important;
  border-radius: 4px 4px 0 0;
}
.box .selectBox{
  background: #F5F7FA;
}
.box /deep/ .iconfont{
  padding:0
}
.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;
  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
/deep/ .el-table .cell {
  white-space: nowrap;
}
/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
}
/deep/ .el-table .el-button:focus,
.el-button:hover {
  background-color: #fff;
  color: #338ce8;
  border: 1px solid #e1e4eb;
}
/deep/ .v-modal {
  z-index: 200 !important;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
  border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}
// /deep/ .el-table {
//   max-height: 400px;
// }
/deep/ .el-drawer__header {
  margin-bottom: 12px;
  padding: 8px 20px 0;
}

.el-button {
  margin-left: 0px !important;
}
/deep/ .el-tabs__item{
    background-color: #F5F7FA;
}
</style>
 